<template>
    <view class="pages">
        <view class="top">
            <view class="phone">
                <!-- <text class="text">手机号</text> -->
                <input class="input" v-model="phone" type="number" placeholder="输入手机号" placeholder-style="font-size:28rpx">
            </view>
            <view class="code">
                <view style="display: flex;">
                    <!-- <text class="text">验证码</text> -->
                    <input class="input" v-model="code" type="text" placeholder="输入验证码" placeholder-style="font-size:28rpx">
                </view>
                <text class="codetext" :class="{'active':!isShow}" @click="getCode">{{isShow?'获取验证码':count + '秒重新获取'}}</text>
            </view>
        </view>
        <view class="bottom">
            <view class="phone">
                <!-- <text class="text">设置密码</text> -->
                <input class="input" v-model="password" type="password" placeholder="输入新的密码" placeholder-style="font-size:28rpx">
            </view>
            <view class="phone" style="border: none;">
                <!-- <text class="text">确认密码</text> -->
                <input class="input" style="margin-bottom: 0;" v-model="password1" type="password" placeholder="再次输入密码" placeholder-style="font-size:28rpx">
            </view>
            <text style="font-size: 28rpx;color: rgb(144,147,153);margin-top: 16rpx;margin-bottom: 64rpx;">密码需包含数字、英文字母、特殊字符中的任意2种，且至少8位字符</text>
        </view>
        <button class="btn" @click="goSign()">确认</button>
    </view>
</template>

<script>
import { httpRequest } from '../../utils/http';
export default {
    name: 'UniPresetVueVite1Sign',

    data() {
        return {
            code:'',
            phone:'',
            password:'',
            password1:'',
            count:59,
            isShow:true
        };
    },

    methods: {
        async getCode(){
            if(!this.isShow) return
            if(!this.phone.trim()) return uni.showToast({
                title: '请输入手机号',
                icon: 'error'
            })
            if(!this.isPhoneNumber(this.phone)) return uni.showToast({title:'请输入正确手机号',icon:'none'})
            this.isShow = false
            const res = await httpRequest('/api/sendingPhoneCode','POST',{phone:this.phone})
           const timeId = setInterval(() => {
                this.count--
                if(this.count <= 0){
                    this.isShow = true      
                    clearInterval(timeId)
                    this.count = 59
                }
            }, 1000);

        },
       async goSign(){
            if(!this.isPhoneNumber(this.phone)) return uni.showToast({title:'请输入正确手机号',icon:'none'})
            if(!this.code) return uni.showToast({title:'请输入验证码',icon:'none'})
            if(this.password!=this.password1) return uni.showToast({title:'两次密码输入不一致',icon:'none'})
            if(!this.isValidAlphanumeric(this.password)) return uni.showToast({title:'密码格式不正确',icon:'none'})
            const res = await httpRequest('/api/businReg','POST',{
                phone:this.phone,
                code:this.code,
                password:this.password
        })
        console.log(res);
        if(!res.success){
            return uni.showToast({
                title: res.message,
                icon: 'error'
            })
        }
        if(res.success){
            uni.showToast({
                title:'注册成功',

            })
            setTimeout(() => {
                uni.redirectTo({ url: '/pages/login/login' })
            }, 1000);
        }
        },
        isPhoneNumber(phone) {
            const phoneRegex = /^1[0-9]{10}$/; // 手机号简单校验，假设手机号为11位数字且以1开头
            return phoneRegex.test(phone);
        },
        isValidAlphanumeric(input) {
          const regex = /^[a-zA-Z0-9]{6,20}$/;
          return regex.test(input);
        }        
    },
};
</script>

<style lang="scss" scoped>
    .pages{
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: #fff;
        overflow: hidden;
        .input{
            box-sizing: border-box;
            background-color: rgb(245,245,245);
            border-radius: 304rpx;
            width: 612rpx;
            height: 88rpx;
            padding-left: 40rpx;
        }
        .top{
            margin-bottom: 48rpx;
            padding: 0 70rpx;
            margin-top: 64rpx;
            .phone{
                height: 90rpx;
                display: flex;
                align-items: center;
                margin-bottom: 24rpx;
                .text{
                    font-size: 28rpx;
                    color: rgb(69,70,74);
                    margin-right: 42rpx;
                }
            }
            .code{
                height: 90rpx;
                display: flex;
                align-items: center;
                justify-content: space-between;
                .codetext{
                    z-index: 99;
                    position: absolute;
                    right: 108rpx;
                    font-size: 28rpx;
                    color: rgb(142,84,244);
                }
                .text{
                    font-size: 28rpx;
                    color: rgb(69,70,74);
                    margin-right: 42rpx;
                }
            }
        }
        .bottom{
            margin-bottom: 48rpx;
            padding: 0 70rpx;
            margin-top: 24rpx;
            .phone{
                height: 90rpx;
                display: flex;
                align-items: center;
                margin-bottom: 24rpx;
                .text{
                    font-size: 28rpx;
                    color: rgb(69,70,74);
                    margin-right: 42rpx;
                }
            }
        }
        .btn{
            width: 612rpx;
            height: 88rpx;
            border-radius: 428rpx;
            background-color: rgb(142,84,244);
            color: #fff;
            font-size: 32rpx;
            line-height: 88rpx;
        }
    }
    .active{
        color: #b8b5b5 !important;
    }
</style>